<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生选择器</title>
		<style>
			/* ⑥派生选择器：后代选择器，用于选中祖先范围内所有匹配的子孙元素 
			  语法：任意选择器[祖先元素] 任意选择器[祖先元素中所有匹配的元素]
			*/
		   #header span{
			   display: block;
			   width: 50%;  /*?问题*/
			   background-color: #dda0ff;
		   }
		   #header span:hover{
			   background-color: #ffc7ff;
		   }
		   /* ⑦子代选择器：通过父子关系元素，选择子元素
		       语法：任意选择器[父元素]>任意选择器[父元素中所有匹配的元素]
			   实现：左导航 颜色：#b2c3ff
		   */
		  #header>span{
			  background-color: #ffc7ff;
		  }
		</style>
	</head>
	<body>
		<div id="header">
			<span>左导航</span>
			<span>
				<div class="header">
					<span>右1导航</span>
					<span>右2导航</span>
				</div>
			</span>
		</div>
	</body>
</html>